<template>
    <div :class="isSearch?'search_fixed':''"  @touchmove.stop="stop_slider" @touchstart="start_slider">
      <div class="search_wrap" @touchmove.prevent>
        <span v-show="!isSearch">北京</span>
        <span v-show="isSearch" @click="back">取消</span>
        <div  class="search">
          <form action="" @submit.prevent="search">
            <input maxlength="12" id="input" @focus="get_focus" v-model="val_" :placeholder="defaultSearch" ref="input" type="search">
          </form>
          <b  v-show="isSearch" @click="search"></b>
        </div>
      </div>
      <div v-show="isSearch" class="search_hot_wrap" ref="scroll_wrap">
        <div class="words_wrap">
          <p>热门搜索</p>
          <ul>
            <li @click="select_search(item)" v-for="(item,index) in words">{{item}}</li>
          </ul>
        </div>

        <div v-show="recentlySearch.length>0" class="recentlySearch_wrap ">
          <p>最近搜索</p>
          <ul>
            <li @click="select_search(item)" v-for="(item,index) in recentlySearchReverse">{{item}}</li>
          </ul>
          <div @click="clear_loaclStorage">清除搜索记录</div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import itemList from 'components/item_list'
  import {search_items, common_search_word} from 'api/search'
  import {w_scroll_top} from 'assets/dom/dom'
  import {get_cookie,get_localStorage,set_localStorage} from 'assets/cookie/cookie'
  import {mapGetters, mapMutations} from 'vuex'
  import {stop_slider} from 'assets/base/base'


  export default {
    name: 'search',
    data() {
      return {
        isSearch:false,
        val_: "",
        is_more: true,
        words: [],
        recentlySearch:[],
        defaultSearch:'津猫'
      }
    },
    created() {
      this.search_words()
      this.recentlySearch=get_localStorage('recentlySearch')
    },
    activated(){
      this.search_words()
      this.recentlySearch=get_localStorage('recentlySearch')
      this.isSearch=false
      this.val_=''
    },
    mounted() {
    },
    computed: {
      recentlySearchReverse(){
        return this.recentlySearch.reverse()
      },
      ...mapGetters(['searchVal'])
    },
    methods: {
      get_focus(){
        this.isSearch=true
        this.recentlySearch=get_localStorage('recentlySearch')
      },
      clear_loaclStorage(){
        this.recentlySearch=[]
        set_localStorage('recentlySearch',[])
      },
      search_words() {
        common_search_word({}).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.words = _res.data
            }
          }
        })
      },
      select_search(item) {
        this.val_=item
        this.search()
      },
      search(){
         if(this.val_===''){
           this.val_=this.defaultSearch
         }
        this.val_=this.val_.replace(/^\s*|\s*$/g, "")
           if(this.val_){
             this.setSearchVal(this.val_)
             this.$refs.input.blur()
             this.$router.push('/search')
           }else{
             this.setHint({
               text:'请输入内容再搜索',
               ok:false,
               isHint:true
             })
             this.$refs.input.focus()
           }
      },
      back(){
        this.val_=''
        this.isSearch=false
      },
      start_slider(e){
        this.start={
          X:e.touches[0].pageX,
          Y:e.touches[0].pageY
        }
      },
      stop_slider(e){
        stop_slider(e,this.$refs.scroll_wrap,this.start)
      },
      ...mapMutations({
        setSearchVal: 'SET_SEARCH_VAL',
        setHint:'SET_HINT'
      })
    },
    components: {
      itemList
    },
    watch: {

    }
  }
</script>

<style scoped lang="scss">

  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transition: all 0.35s;
  }
  .search_fixed{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #fff;
    top: 0;
  }
  .items_wrap{
    height: 100%;
    padding-bottom: 20px;
    padding-top: 45px;
    overflow: auto;
    max-width: 768px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
  }
  .search_hot_wrap{
    height: 100%;
    padding-top: 54px;
    overflow: auto;
    max-width: 768px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
  }
  .words_wrap {
    width: 90%;
    margin: 0 auto;
    > p {
      text-align: left;
      margin-left: 15px;
      margin-top: 11px;
      color: #aaa;
    }
    > ul {
      overflow: hidden;
      > li {
        float: left;
        padding: 8px;
        margin-left: 15px;
        margin-top: 8px;
        border: 1px solid #aaa;
        border-radius: 5px;
        color: #555;
      }
    }
  }
  .recentlySearch_wrap {
    width: 90%;
    margin: 20px auto;
    > p {
      text-align: left;
      margin-left: 15px;
      margin-top: 11px;
      color: #888;
    }
    > ul {
      overflow: hidden;
      > li {
        float: left;
        padding: 6px;
        margin-left: 15px;
        margin-top: 8px;
        border: 1px solid #aaa;
        border-radius: 5px;
        color: #aaa;
      }
    }
    >div{
      width: 80%;
      height: 30px;
      line-height: 30px;
      margin: 10px auto 0 auto;
      border: 1px solid #ddd;
      color: #aaa;
      border-radius: 5px;
    }
  }
  .search_wrap{
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    background-color: #25abea;
    padding-bottom: 6px;
    padding-top: 8px;
    max-width: 768px;
    min-width: 320px;
    >span{
      float: left;
      font-size: 13px;
      margin-top: 5px;
      margin-left: 10px;
      font-weight: bold;
      margin-right: 8px;
      padding-top: 5px;
      padding-bottom: 5px;
      letter-spacing: 2px;
      color: #eee;
    }
  }
  .search {
    overflow: hidden;
    position: relative;
    margin-right: 14px;
    height: 32px;
    >p{
      position: absolute;
      height: 28px;
      padding-left: 5px;
      padding-right: 5px;
      line-height: 28px;
      background: #aaa;
      left: 9px;
      top: 2px;
      color: #fff;
      border-radius: 3px;
      letter-spacing: 1px;
      font-size: 14px;
    }
    >form {
      background-color: #93d4f4;
      padding-top: 7px;
      border-radius:10px;
      padding-left: 10px;
      height: 33px;
      padding-right: 44px;
      input::-webkit-input-placeholder {
        color: #aaa;
      }
      input::-moz-placeholder {
        color: #aaa;
      }
      input:-moz-placeholder {
        color: #aaa;
      }
      input:-ms-input-placeholder {
        color: #aaa;
      }
      input[type=search]::-webkit-search-cancel-button {
        -webkit-appearance: none; //此处只是去掉默认的小×
      }
      input {
        width: 100%;
        height: 18px;
        line-height: 18px;
        outline: none;
        border: none;
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
        background-color: transparent;
      }
    }
    > b {
      position: absolute;
      top: 0;
      right: 9px;
      width: 32px;
      height: 32px;
      background-image: url("../assets/img/22.png");
      background-size: 80% 80%;
      background-position-y: 42%;
      background-repeat: no-repeat;
      transition: transform 0.12s;
      cursor: pointer;
      &:active {

        transform: scale(1.2);
      }
    }
  }
  .loading{
    height: 30px;
    line-height: 30px;
    color: #aaa;
  }
  .no_more{
    height: 30px;
    line-height: 30px;
    color: #aaa;
  }
</style>
